<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="订单号" prop="_id" width="230"> </el-table-column>
            <el-table-column label="用户" prop="user_id.name" width="100"> </el-table-column>
            <el-table-column label="商品" prop="goods_id.name" width="100"> </el-table-column>
            <el-table-column label="总价" prop="sum" width="80"> </el-table-column>
            <el-table-column label="状态" prop="status" width="80"> </el-table-column>
            <el-table-column label="备注" prop="remark"> </el-table-column>
            <el-table-column label="时间" prop="date" width="200"></el-table-column>
            <el-table-column align="right" width="250">
                <template slot="header" slot-scope="scope">
                    <el-input placeholder="请输入内容" v-model="search" class="input-with-select" size="mini">
                        <el-select v-model="search_type" slot="prepend" placeholder="请选择">
                            <el-option label="订单号" value="1"></el-option>
                            <el-option label="未发货" value="2"></el-option>
                            <el-option label="已发货" value="3"></el-option>
                            <el-option label="已取消" value="3"></el-option>
                            <el-option label="已收货" value="3"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="page"> </el-pagination>
        <el-dialog title="订单详情" :visible.sync="dialogFormVisible" center>
            <dialogFrom :editData="editData"></dialogFrom>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="update">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import dialogFrom from "../order/from";
import axios from "axios";
export default {
    data() {
        return {
            tableData: [],
            search_type: "",
            search: "",
            dialogFormVisible: false,
            editData: {},
            deleteData: {},
            total: 0,
            page_i: 1,
            listType: ""
        };
    },
    methods: {
        handleEdit(index, row) {
            // console.log(index, row);
            this.editData = { ...this.tableData[index] };
            this.dialogFormVisible = true;
        },
        handleDelete(index, row) {
            this.deleteData = { ...this.tableData[index] };
            this.delete();
        },
        inputChange(e) {
            this.$forceUpdate();
        },
        find(skip, limit, query) {
            query.is_delete = 1;
            query.status = 1;
            axios({
                method: "post",
                url: "/order/query",
                data: {
                    query,
                    limit,
                    skip
                }
            }).then(res => {
                if (res.code == 0) {
                    console.log("获取数据失败");
                } else {
                    console.log("获取数据成功");
                    this.tableData = res.data.result;
                    this.tableData.map(item => {
                        let str;
                        switch (item.status) {
                            case 1:
                                str = "未发货";
                                break;
                            case 2:
                                str = "已发货";
                                break;
                            case 3:
                                str = "已取消";
                                break;
                            default:
                                break;
                        }
                        item.status = str;
                        return item;
                    });
                    this.total = res.data.sum;
                }
            });
        },
        update() {
            this.dialogFormVisible = false;
            let editData = this.editData;
            let i;
            switch (this.editData.status) {
                case "未发货":
                    i = 1;
                    break;
                case "已发货":
                    i = 2;
                    break;
                case "已取消":
                    i = 3;
                    break;
                default:
                    break;
            }
            this.editData.status = i;
            axios({
                method: "post",
                url: "/order/update",
                data: {
                    _id: editData._id,
                    data: {
                        status: editData.status,
                        remark: editData.remark
                    }
                }
            }).then(res => {
                if (res.code == 0) {
                    console.log("修改数据失败");
                } else {
                    console.log("修改数据成功");
                    this.find(10 * this.page_i - 10, 10, {});
                }
            });
        },
        page(i) {
            this.page_i = i;
            this.find(10 * this.page_i - 10, 10, {});
        },

        delete() {
            let i = this.deleteData;
            axios({
                method: "post",
                url: "/order/update",
                data: {
                    _id: i._id,
                    data: {
                        is_delete: 0
                    }
                }
            }).then(res => {
                if (res.code) {
                    console.log("修改数据失败");
                } else {
                    console.log("修改数据成功");
                    this.find(10 * this.page_i - 10, 10, {});
                }
            });
        }
    },
    components: {
        dialogFrom
    },

    created() {
        this.find(0, 10, {});
    }
};
</script>
<style>
.cell {
    text-align: center;
}
.el-dialog {
    width: 35%;
}
.el-pagination {
    margin-top: 30px;
}
</style>
